<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible="visible"
      @update:visible="$emit('update:visible', $event)"
      width="800px"
      :before-close="handleClose">
      <div class="base-info">
        <el-row :gutter="20">
          <el-col :span="6">
            <span>【题型】：
              <span v-if="questionInfo.questionType==='1'">单选</span>
              <span v-if="questionInfo.questionType==='2'">多选</span>
              <span v-else>简答</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>【编号】：{{questionInfo.id}}</span>
          </el-col>
          <el-col :span="6">
            <span>【难度】：
              <span v-if="questionInfo.questionType==='1'">简单</span>
              <span v-if="questionInfo.questionType==='2'">一般</span>
              <span v-else>困难</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>【标签】：{{questionInfo.tags}}</span>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <span>【学科】：{{questionInfo.subjectName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【目录】：{{questionInfo.directoryName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【方向】：{{questionInfo.direction}}</span>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <!-- 答案 -->
      <div class="question-part">
        <div class="question">
          <div>【题干】：</div>
          <div v-html="questionInfo.question"></div>
        </div>
        <div class="option" style="margin-top: 10px;">
          <div class="simple-answer"></div>
          <div class="select-question">
            <div class="type" style="margin-bottom: 10px;">
              <span v-if="questionInfo.questionType==='1'">
                单选：<span>选项(选中项为正确答案)</span>
              </span>
              <span v-if="questionInfo.questionType==='2'">
                多选：<span>选项(选中项为正确答案)</span>
              </span>
              <span v-else>简答：</span>
            </div>
            <!-- 单选 -->
            <div class="radio-group" v-if="questionInfo.questionType==='1'">
              <el-radio
                v-for="item in questionInfo.options"
                :key="item.code.charCodeAt()"
                v-model="choosed"
                :label="item.isRight">
                  <span style="margin-right: 5px;">{{item.code}}</span>
                  <span v-if="item.title!==''">{{item.title}}</span>
                  <el-image
                    v-if="item.img!== ''"
                    style="width: 100px; height: 100px"
                    :src="item.img"
                  ></el-image>
              </el-radio>
            </div>
            <!-- 多选 -->
            <div class="checkbox-group" v-if="questionInfo.questionType==='2'">
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="item in questionInfo.options"
                  :key="item.code.charCodeAt()"
                  :label="item.isRight"
                  >
                    <span style="margin-right: 5px;">{{item.code}}</span>
                    <span v-if="item.title!==''">{{item.title}}</span>
                    <el-image
                      v-if="item.img!== ''"
                      style="width: 100px; height: 100px"
                      :src="item.img"
                    ></el-image>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 简答 -->
            <div class="simple-text" v-if="questionInfo.questionType==='3'">
              <span>答案见答案解析</span>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 参考答案(视频部分) -->
      <div class="video-part">
        <span>【参考答案】：</span>
        <span>
          <el-button type="danger" size="medium" @click="showVideo" :disabled="questionInfo.videoURL===''">
            视频答案预览
          </el-button>
        </span>
        <div class="video-player" v-if="isShowVideo" style="margin-top: 10px;">
          <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true"/>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 答案解析 -->
      <div class="anser-analyse">
        <span>【答案解析】：</span>
        <div v-html="questionInfo.answer" style="display: inline-block;"></div>
      </div>
      <el-divider></el-divider>
      <div class="anser-remark" style="margin-bottom: 20px;">
        <span>【题目备注】：</span>
        <span>{{ questionInfo.remarks }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getQuestDetail } from '@/api/querstionbank'
export default {
  name: 'PreviewDialog',
  props: {
    visible: Boolean,
    passId: Number
  },
  data() {
    return {
      isShowVideo:false,
      video: {
        url: '',
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: false
      },
      choosed: 1,
      questionInfo: {},
      checkList: [ 1 ]
    }
  },

  methods: {
    async getDeatil() {
      const res = await getQuestDetail(this.passId)
      this.questionInfo = res
      // console.log(res.options[0].code.charCodeAt())
      if (res.videoURL!== '') {
        this.video.url = res.videoURL
      }
      console.log(res)
    },
    handleClose(done) {
      return done()
    },
    showVideo() {
      this.isShowVideo = true
    }
  },
  computed: {
    $video(){
      return this.$refs.vueMiniPlayer.$video
    }
  },
  watch: {
    visible(val) {
      if(this.passId && val){
        this.getDeatil()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal{
  margin: 18px 0!important;
}
::v-deep .el-row{
  &:nth-child(n+2){
    margin-top: 18px;
  }
}
</style>
